/* eslint-disable react-hooks/exhaustive-deps */
import {Typography, Checkbox as AntdCheckbox } from 'antd'
import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import { useEffect}from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { FC } from 'react-router/node_modules/@types/react';
import { getCategory } from '../../store/actions/category.action';
import { AppState } from '../../store/reducers';
import { CategoryState } from '../../store/reducers/category.reducer';
const {Title} = Typography;


interface Props {
    handlerChange: (value: string[]) => void
}
const CheckBox: FC<Props> = ({handlerChange}) => {
    const category = useSelector<AppState, CategoryState>(state => state.category)
    
    const dispatch = useDispatch();
    useEffect(() => {
        
        dispatch(getCategory())
    }, [])
    function onChange(checkedValue: CheckboxValueType[]) {
        handlerChange(checkedValue as string[])
    }
    return (
        <>
            <Title level={4}>按照分类筛选</Title>
            <AntdCheckbox.Group  
                className='checkBoxFilter'
                options={category.category.result.map(item => ({
                    label: item.name,
                    value: item._id
                }))}
                onChange={onChange}
                />
            
        </>
    )
}

export default CheckBox
